<template>
  <div class='container' style="box-sizing:border-box">
    <el-card class="box-card">
      <!-- 第一行 输入框和按钮 -->
      <el-form :inline="true"  class="demo-form-inline">
        <div>
          <!-- 输入框 -->
          <el-form-item label="学科名称">
          <el-input v-model.trim="search"></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button @click="empty"  size="small">清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refer"  size="small">搜索</el-button>
          </el-form-item>
        </div>
        <!-- 添加按钮 -->
        <el-form-item>
          <el-button type="success" icon="el-icon-edit" @click="addsubject"  size="small">新增学科</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 数据总条数 -->
      <el-form class="shujusetting" style="height:35px;margin-bottom: 13px;">
        <el-alert :title="'数据一共'+ counts +'条'" type="info" show-icon :closable="false" ></el-alert>
      </el-form>

      <!-- 表格 -->
      <template>
        <el-table :data="list" style="width: 100%" :header-cell-style="{ background: 'rgba(244, 244, 245)', color: '#909399' }">
          <el-table-column type=index label="序号" width="40"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="180"></el-table-column>
          <el-table-column prop="username" label="创建者" width="120"></el-table-column>
          <el-table-column  label="创建日期" width="180">
            <template #default="{row}">
              {{formatTime(row.addDate)}}
            </template>
            </el-table-column>
          <el-table-column  label="前台是否显示" width="120">
            <template #default="{row}">
                 {{row.isFrontDisplay === 0 ?'否':'是'  }}    
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" width="120" ></el-table-column>
          <el-table-column prop="tags" label="标签" width="120"></el-table-column>
          <el-table-column prop="totals" label="题目数量" width="100"></el-table-column>
          <el-table-column
              label="操作"
              fixed="right"
              width="250">
              <template #default="scope">
                <el-button type="text" @click="classifySkip(scope.row)">学科分类</el-button>
                <el-button type="text" @click="labelSkip(scope.row)">学科标签</el-button>
                <el-button type="text" @click="alter(scope.row.id)">修改</el-button>
                <el-button type="text" @click="del(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      </template>
     
      <!-- 分页器 -->
      <div class="block">
        <div class="demonstration"></div>
        <el-pagination
          background
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pages.pagesize"
          layout=" prev,pager,next,sizes,jumper"
          @current-change="currentPage"
          @size-change="pageSize"
          :total="counts">
        </el-pagination>
      </div>
      <!-- 新增 -->
       <el-dialog
            title="新增学科"
            :visible.sync="dialogVisible"
            width="30%"
            height="40%"
            >
            <el-form :model="FromData" :rules="rules" ref="Fromlist">
              <el-form-item label="学科名称" prop="subjectName">
                <el-input v-model="FromData.subjectName" placeholder="请输入学科名称" style="width:80%"></el-input>
              </el-form-item>
            </el-form>
            <el-form>
              <el-switch
                v-model="FromData.isFrontDisplay"
                style="display: block"
                inactive-text="是否显示"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// 学科列表,学科简单列表,学科详情,学科添加,学科修改,学科删除
import { list, simple, detail, add, update, remove } from '@/api/hmmm/subjects.js'

export default {
  data() {
    return {
      search: '',
      FromData: {
        id: '', // 序号
        username: '', // 创建者
        addDate: '', // 创建日期
        // 这个要绑定给Switch开关
        isFrontDisplay: '1', // 前台
        subjectName: '', // 学科名称
        tags: '', // 标签
        totals: '', // 题目数量
        twoLevelDirectory: '', // 二级目录
      },
      rules: {
          subjectName: [
            { required: true, message: '请输入学科名称', trigger: 'blur' },
          ]
      },
      list: [],
      pages: {
        page: 1, // 当前第几页
        pagesize: 10, // 每页条数
        subjectName: ''
      },
      counts: 0,
      dialogVisible: false,
      
    }
  },
  mounted() {
    this.getList()
    this.pages={}
    this.search = null
  },
  methods: {
    // 清空
    clear(){
      this.FromData= {
        id: '', // 序号
        username: '', // 创建者
        addDate: '', // 创建日期
        // 这个要绑定给Switch开关
        isFrontDisplay: '1', // 前台
        subjectName: '', // 学科名称
        tags: '', // 标签
        totals: '', // 题目数量
        twoLevelDirectory: '', // 二级目录
      }
    },
    // 渲染
    async getList() {
      const res = await list(this.pages)
     
      // console.log(res)
      this.list = res.data.items
      this.counts = res.data.counts
    },
    // 时间dayjs
    formatTime(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    // 分页器
    currentPage(value){
      this.pages.page = value
      this.getList()
    },
    pageSize(value){
     this.pages.pagesize = value
     this.getList()
    },
    // 查询
    async refer() {
     
      // 把输入的数据赋值给 subjectName
      this.pages.subjectName = this.search
      const res = await list(this.pages)
      // console.log(res)
      this.list = res.data.items
      if(this.search===''){
        this.list = []
      }
    },
    // 清空
    empty() {
      this.search = null
      this.pages={}
      this.getList()
    },
    // 点击新增
    addsubject() {
      this.dialogVisible = true
    },
    // 确认按钮
    confirm(){
      this.$refs.Fromlist.validate(async(valid)=>{
        if(valid){
          // // 调用添加接口
          // await add(this.FromData)
          // // 提示
          // this.$message.success('添加成功')
          // // 关闭弹窗
          //  this.dialogVisible = false
          // //  渲染数据
          //  this.getList()
          // //  重置添加表单
          //  this.FromData.subjectName = ''
          if(this.FromData.id){
            await update(this.FromData)
            // 提示
            this.$message.success('修改成功')
          }else{
            // 调用添加接口
            await add(this.FromData)
            // 提示
            this.$message.success('添加成功')
          }
          // 关闭弹窗
           this.dialogVisible = false
          //  渲染数据
           this.getList()
          //  重置添加表单
          //  this.FromData.subjectName = ''
           this.clear()
        }
      })
    },
    // 取消
    cancel(){
          // 关闭弹窗
           this.dialogVisible = false
          //  渲染数据
           this.getList()
          //  重置添加表单
           this.FromData.subjectName = ''
    },
    // 删除
    del(id){
      // console.log(id);
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 调接口
          await remove(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          // 重新渲染
          this.getList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 修改
    async alter(id){
      // 打开弹窗
      this.dialogVisible = true
      // 调用详情接口
      const res =  await detail(id)
      this.FromData = res.data
       
    },
    // 学科分类跳转
    classifySkip(row){
      // console.log(row);
      this.$router.push({ 
        path: "directorys",
        query:{id:row.id,name:row.subjectName}
      })
    },
    // 学科标签跳转
    labelSkip(row){
      this.$router.push({ 
        path: "tags",
        query:{id:row.id,name:row.subjectName}
      })
    }
  }
}
</script>

<style  lang='less'>
.block{
  display: flex;
  justify-content:space-between;
  margin-top: 15px;
  padding: 2px 5px;
}
.demo-form-inline{
  display: flex;
  justify-content: space-between;
}
.shujusetting{
  height: 30px;
  background-color:rgb(244, 244, 244);
}
.table el-table-column:first-child{
  background-color:rgb(244, 244, 244);
}


</style>
